/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import styles from './menu.module.css'
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { Redirect, Route, Switch, useLocation } from "react-router-dom/cjs/react-router-dom.min";
import { setAccountCache, setPasswordCache, setTokenCache } from "@/store/actions/storage";
import icon_exit from "@/assets/icon_exit.webp"
import icon_data_nor from "@/assets/icon_data_nor.webp"
import icon_data_hl from "@/assets/icon_data_hl.webp"
import icon_dian_nor from "@/assets/icon_dian_nor.webp"
import icon_dian_hl from "@/assets/icon_dian_hl.webp"
import icon_setting_nor from "@/assets/icon_setting_nor.webp"
import icon_setting_hl from "@/assets/icon_setting_hl.webp"
import icon_arrow_down_nor from "@/assets/icon_arrow_down_nor.webp"
import icon_arrow_up_nor from "@/assets/icon_arrow_up_nor.webp"
import TcConfigLayout from "../testcenter/config/tcConfigLayout";
import TcAppShowLayout from "../testcenter/appshow/tcAppShowLayout";
import TcUserLayout from "../testcenter/user/tcUserLayout";
import TcSmsLayout from "../testcenter/sms/tcSmsLayout";
import TcChannelLayout from "../testcenter/channel/tcChannelLayout";
import TcOrderLayout from "../testcenter/order/tcOrderLayout";
import TcPointLayout from "../testcenter/point/tcPointLayout";



export default function MenuLayout() {

    const history = useHistory();
    const location = useLocation();

    const [menuList, setMenuList] = useState([
        {
            icon: icon_dian_nor,
            iconHl: icon_dian_hl,
            label: "点点数据",
            path: "/diandian",
            open: false,
            children: [
                {
                    label: "配置",
                    open: false,
                    path: "/config"
                },
                {
                    label: "进行中",
                    open: false,
                    path: "/processing"
                },
                {
                    label: "已完成",
                    open: false,
                    path: "/result"
                }
            ],
            action: () => onHandleMenuParentClick(0)
        },
        {
            icon: icon_data_nor,
            iconHl: icon_data_hl,
            label: "测试中心",
            path: "/testcenter",
            open: false,
            children: [
                {
                    label: "查询条件",
                    open: false,
                    path: "/config",
                    action: () => onHandleMenuParentClick(1, 0)
                },
                {
                    label: "配置信息",
                    open: false,
                    path: "/appshow",
                    action: () => onHandleMenuParentClick(1, 1)
                },
                {
                    label: "短信信息",
                    open: false,
                    path: "/sms",
                    action: () => onHandleMenuParentClick(1, 2)
                },
                {
                    label: "用户信息",
                    open: false,
                    path: "/user",
                    action: () => onHandleMenuParentClick(1, 3)
                },
                {
                    label: "渠道信息",
                    open: false,
                    path: "/channel",
                    action: () => onHandleMenuParentClick(1, 4)
                },
                {
                    label: "认证信息",
                    open: false,
                    path: "/data",
                    children: [
                        {
                            label: "Device",
                            open: false,
                            path: "/device"
                        },
                        {
                            label: "Hardware",
                            open: false,
                            path: "/hardware"
                        },
                        {
                            label: "Storage",
                            open: false,
                            path: "/storage"
                        },
                        {
                            label: "Wifi",
                            open: false,
                            path: "/wifi"
                        },
                        {
                            label: "App",
                            open: false,
                            path: "/app"
                        },
                        {
                            label: "SMS",
                            open: false,
                            path: "/sms"
                        },
                        {
                            label: "Firebase",
                            open: false,
                            path: "/firebase"
                        }
                    ],
                    action: () => onHandleMenuParentClick(1, 5)
                },
                {
                    label: "订单信息",
                    open: false,
                    path: "/order",
                    action: () => onHandleMenuParentClick(1, 6)
                },
                {
                    label: "埋点信息",
                    open: false,
                    path: "/point",
                    action: () => onHandleMenuParentClick(1, 7)
                }
            ],
            action: () => onHandleMenuParentClick(1)
        },
        {
            icon: icon_setting_nor,
            iconHl: icon_setting_hl,
            label: "系统工具",
            path: "/setting",
            open: false,
            children: [
                {
                    label: "缓存重置",
                    open: false,
                    path: "/cache"
                },
                {
                    label: "APK上传",
                    open: false,
                    path: "/upload"
                },
                {
                    label: "功能建议",
                    open: false,
                    path: "/suggest"
                }
            ],
            action: () => onHandleMenuParentClick(2)
        },
    ]);

    useEffect(() => {

        return () => {
        }
    }, [])

    const onHandleMenuParentClick = (parentSection, childrenSection) => {
        if (parentSection < 0) return;
        if (menuList.length <= parentSection) return;

        if (childrenSection >= 0) {
            const newState = [...menuList];
            const item = newState[parentSection];
            if (item.children && item.children.length > childrenSection) {
                const childrenItem = item.children[childrenSection];
                childrenItem.open = !childrenItem.open;
                setMenuList(newState);

                // 跳转
                history.replace(`${item.path}${childrenItem.path}`);
            }
        }
        else {
            const newState = [...menuList];
            for (let i = 0; i < newState.length; i++) {
                const item = newState[i];
                if (i === parentSection) {
                    item.open = !item.open;
                }
                else {
                    item.open = false;
                }
                if (item.children && item.children.length > 0) {
                    for (let i = 0; i < item.children.length; i++) {
                        const childrenItem = item.children[i];
                        childrenItem.open = false;
                    }
                }
            }
            setMenuList(newState);
        }
    }

    const onHandleExitClick = () => {
        setAccountCache("");
        setPasswordCache("");
        setTokenCache("");
        window.location.href = '/login';
    }

    return (
        <div className={styles.menuRoot}>

            <div className={styles.menuTopLayout}>
                <div className={`${styles.menuFlexFull}`}>金壹-内网访问</div>
                <img className={`${styles.menuTableListRowIcon}`} src={icon_exit} alt="" onClick={onHandleExitClick} />
            </div>

            <div className={styles.menuLeftLayout}>
                {menuList && menuList.length > 0 && menuList.map((value, index) => {
                    return <div className={`${styles.menuLeftLayoutMenu} ${(value.path === location.pathname) ? styles.menuLeftLayoutMenuSelected : ''}`}
                        key={index}>

                        <div className={styles.menuLeftLayoutMenuItem} onClick={value.action}>
                            <img className={styles.menuLeftLayoutMenuIcon} src={value.icon} alt="" />
                            {value.label}
                            {value.children && value.children.length > 0 && <img className={styles.menuLeftLayoutMenuExtIcon} src={value.open ? icon_arrow_up_nor : icon_arrow_down_nor} alt="" />}
                        </div>

                        {value.open && value.children && value.children.length > 0 && value.children.map((secondValue, secondIndex) => {
                            return (
                                <div key={secondIndex} className={styles.menuLeftLayoutMenuChildContent}>
                                    <div className={`${styles.menuLeftLayoutMenuItem} ${styles.menuLeftLayoutMenuSecondLevel}`} onClick={secondValue.action}>
                                        {secondValue.label}
                                        {secondValue.children && secondValue.children.length > 0 && <img className={styles.menuLeftLayoutMenuExtIcon} src={secondValue.open ? icon_arrow_up_nor : icon_arrow_down_nor} alt="" />}
                                    </div>

                                    {secondValue.open && secondValue.children && secondValue.children.length > 0 && secondValue.children.map((thirdValue, thirdIndex) => {
                                        return (
                                            <div key={thirdIndex} className={styles.menuLeftLayoutMenuChildContent}>
                                                <div className={`${styles.menuLeftLayoutMenuItem} ${styles.menuLeftLayoutMenuThirdLevel}`} onClick={thirdValue.action}>
                                                    {thirdValue.label}
                                                </div>
                                            </div>
                                        )
                                    })}
                                </div>
                            )
                        })}
                    </div>
                })}
            </div>

            <div className={styles.menuContentLayout}>
                <Switch>
                    <Route path="/testcenter/appshow"><TcAppShowLayout /></Route>
                    <Route path="/testcenter/user"><TcUserLayout /></Route>
                    <Route path="/testcenter/sms"><TcSmsLayout /></Route>
                    <Route path="/testcenter/config"><TcConfigLayout /></Route>
                    <Route path="/testcenter/channel"><TcChannelLayout /></Route>
                    <Route path="/testcenter/order"><TcOrderLayout /></Route>
                    <Route path="/testcenter/point"><TcPointLayout /></Route>
                    <Redirect to="/testcenter/config" />
                </Switch>
            </div>
        </div>
    )
}